<template>
  <div class="knowledge-screen">
    <el-container class="h-screen">
      <el-header class="flex items-center justify-between bg-white shadow px-6">
        <div class="flex items-center space-x-6">
          <!-- 顶部导航菜单 -->
          <el-menu mode="horizontal" :default-active="active" class="border-0">
            <el-menu-item index="2">推荐</el-menu-item>
            <el-menu-item index="3">热榜</el-menu-item>
            <el-menu-item index="4">关注</el-menu-item>
            <el-menu-item index="5">圈子</el-menu-item>
          </el-menu>
        </div>

      </el-header>

      <el-container class="mx-auto" style="max-width: 1200px;">
        <!-- 主内容区 -->
        <el-main class="bg-gray-50 p-6" style="flex: 1;">
          <div class="flex-1 flex justify-center retrieve">
            <!-- 搜索框 -->
            <el-input
                v-model="search"
                placeholder="搜索你感兴趣的内容..."
                clearable
                :prefix-icon="Search"
                class="w-96"
            />
          </div>
<!--          <div class="knowledge-segment" />-->

          <!-- 问题卡片列表 -->
          <el-card
              v-for="(item, index) in feeds"
              :key="index"
              class="feed-card shadow-sm mb-6"
          >
            <div class="flex items-start">
              <div class="flex-1 min-w-0">
                <!-- 问题标题 -->
                <h3 class="font-bold text-lg mb-2">{{ item.question }}</h3>
                <!-- 回答摘要 -->
                <div class="answer text-gray-700 text-sm mb-2">
                  <span :class="['answer-text', { expanded: showFull[index] }]">
                    {{ item.author + ':  ' + item.answer }}
                  </span>
                </div>
                <!-- 操作按钮区 -->
                <div class="flex space-x-4 text-gray-600 mt-3 items-center flex-wrap">
                  <el-button
                      size="small"
                      :class="['custom-like-button', { 'is-liked': item.isLiked }]"
                      @click="toggleLike(index)"
                  >
                    赞同 {{ item.likes }}
                  </el-button>
                  <el-button type="text" size="small" @click="openCommentDialog(index)">
                    {{ item.comments }} 条评论
                  </el-button>
                  <el-button type="text" size="small">分享</el-button>
                  <el-button
                      type="text"
                      size="small"
                      :class="{ 'is-collected': item.isCollected }"
                      @click="toggleCollect(index)"
                  >
                    {{ item.isCollected ? '已收藏' : '收藏' }}
                  </el-button>
                  <el-button
                      type="text"
                      size="small"
                      :class="{ 'is-favorited': item.isFavorited }"
                      @click="toggleFavorite(index)"
                  >
                    {{ item.isFavorited ? '已喜欢' : '喜欢' }}
                  </el-button>
                  <!-- 阅读更多/收起按钮 -->
                  <el-button
                      v-if="item.answer.length > 40"
                      type="text"
                      size="small"
                      class="read-more-btn"
                      @click="toggleContent(index)"
                  >
                    <component :is="showFull[index] ? ArrowUp : ArrowDown" class="el-icon--left" />
                    {{ showFull[index] ? '收起' : '阅读全文' }}
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-main>

        <!-- 侧边栏 -->
        <el-aside width="300px" class="p-4 bg-white border-l">
          <el-card>
            <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </el-card>
          <div class="knowledge-segment" />
          <!-- 圈子推荐 -->
          <h3 class="font-bold mb-3">圈子</h3>
          <div v-for="circle in circles" :key="circle.id" class="flex justify-between items-center mb-2">
            <div>
              <div class="font-semibold">{{ circle.name }}</div>
              <div class="text-xs text-gray-500">{{ circle.desc }}</div>
            </div>
            <el-button type="primary" size="small" plain>+ 加入</el-button>
          </div>
          <el-divider />
          <!-- 用户推荐 -->
          <h3 class="font-bold mb-3">推荐关注</h3>
          <div v-for="rec in recommends" :key="rec.id" class="flex justify-between items-center mb-2">
            <div>
              <div class="font-semibold">{{ rec.name }}</div>
              <div class="text-xs text-gray-500">{{ rec.desc }}</div>
            </div>
            <el-button type="primary" size="small" plain>+ 关注</el-button>
          </div>
        </el-aside>
      </el-container>
    </el-container>

    <!-- 评论对话框 -->
    <el-dialog
        v-model="dialogVisible"
        title="评论"
        width="600px"
        :before-close="handleClose"
        class="comment-dialog"
    >
      <div class="dialog-body">
        <!-- 评论列表 -->
        <div class="comments-list" v-if="currentComments.length > 0">
          <div v-for="(comment, cIndex) in currentComments" :key="cIndex" class="comment-item mb-4 pb-4 border-b border-gray-100 last:border-0 last:mb-0 last:pb-0">
            <!-- 使用 display: table 方法强制对齐头像和文字 -->
            <div class="comment-row">
              <div class="avatar-cell">
                <el-avatar size="small" :src="comment.avatar" />
              </div>
              <div class="content-cell">
                <div class="font-medium text-sm">{{ comment.author }}</div>
                <div class="text-gray-600 text-sm mt-1">{{ comment.content }}</div>
                <div class="text-xs text-gray-400 mt-1">{{ comment.time }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 无评论提示 -->
        <div v-else class="text-center text-gray-500 py-8">
          暂无评论，快来抢沙发！
        </div>

        <!-- 发表评论区域 -->
        <div class="post-comment mt-6">
          <el-input
              v-model="newComment"
              type="textarea"
              :rows="3"
              placeholder="请输入您的评论..."
              class="mb-3"
          ></el-input>
          <div class="flex justify-end">
            <el-button @click="closeCommentDialog">取消</el-button>
            <el-button type="primary" @click="submitComment" :disabled="!newComment.trim()">发表评论</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ArrowDown, ArrowUp, Search } from '@element-plus/icons-vue';

// 活跃菜单项
const active = ref('2');
// 搜索关键词
const search = ref('');

// 模拟的问题数据
const feeds = ref([
  {
    question: '以前在内蒙古买个小物件都得凑运费，现在在拼多多西部包邮后大家生活成本降了多少？',
    author: '吴相',
    answer: '前两天正好和我朋友聊到这个话题，还蛮有感触的。朋友老家在青海某县城，前些年网购确体算过能省多少，但确实方便好和我朋友聊到这个话题，还蛮有感触的。朋友老家在青海某县城，前些年网购确体算过能省多少，但确实方便好和我朋友聊到这个话题，还蛮有感触的。朋友老家在青海某县城，前些年网购确体算过能省多少，但确实方便了很多，以前网购频率1月大概只有3。',
    likes: 12,
    comments: 3,
    isLiked: false,
    isFavorited: false,
    isCollected: false,
    commentList: [
      { author: '用户A', content: '确实方便了很多，以前买东西真的很麻烦。', time: '2023-10-26 10:00', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' },
      { author: '用户B', content: '运费险也省了不少钱。', time: '2023-10-26 11:15', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
      { author: '用户C', content: '同感，生活品质提升了不少。', time: '2023-10-26 14:30', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' }
    ]
  },
  {
    question: '有什么巨爽无比的爽文？',
    author: '温茶再折花',
    answer: '有一次我去山里旅行，结果手机没信号，导航坏掉了，差点迷路。天黑的时候，突然看到远处有一盏灯，跑过去才发现是一间小木屋，屋里坐着一位大爷，给了我一碗面条，还递了一只手电筒。后来我才知道，那大爷年轻时竟然是数学竞赛冠军，靠着解题走遍全国……更夸张的是，他还随手掏出一本厚厚的手稿，说是几十年研究的成果。听完我整个人都震惊了：原来“爽文”不是虚构的，有些现实比小说还离谱！哈哈哈～',
    likes: 472,
    comments: 20,
    isLiked: false,
    isFavorited: false,
    isCollected: false,
    commentList: [
      { author: '小说迷', content: '这个故事太赞了！', time: '2023-10-25 09:00', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
      { author: '生活家', content: '哈哈，现实总是比小说精彩。', time: '2023-10-25 12:45', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' }
    ]
  },
  {
    question: '为什么黑龙江人不愿意在黑龙江？',
    author: 'go up',
    answer: '有个朋友吐槽过，说冬天冷到什么程度呢？就是出门倒一盆热水，半空中直接结成冰渣子。后来她毕业以后去了南方，夏天热得受不了，但她说再也不想回到零下三十度的早晨了。其实很多人走出去也不是讨厌家乡，而是觉得机会更集中在大城市。她还说，有时候梦见大雪封门，醒来发现自己还在广州，笑得一身汗。于是她总结：‘留在家乡是怀念，出去闯荡是选择。’挺有意思的一句话。',
    likes: 104,
    comments: 181,
    isLiked: false,
    isFavorited: false,
    isCollected: false,
    commentList: [
      { author: '东北人', content: '说得太对了，冬天确实不好过。', time: '2023-10-24 15:20', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' },
      { author: '追梦人', content: '机会确实很重要。', time: '2023-10-24 18:10', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }
    ]
  },
]);

// 控制回答是否展开
const showFull = ref(feeds.value.map(() => false));
const toggleContent = (index) => {
  showFull.value[index] = !showFull.value[index];
};

// 点赞功能
const toggleLike = (index) => {
  const item = feeds.value[index];
  item.isLiked = !item.isLiked;
  if (item.isLiked) {
    item.likes += 1;
  } else {
    item.likes -= 1;
  }
};

// 收藏功能
const toggleCollect = (index) => {
  const item = feeds.value[index];
  item.isCollected = !item.isCollected;
};

// 喜欢功能
const toggleFavorite = (index) => {
  const item = feeds.value[index];
  item.isFavorited = !item.isFavorited;
};

// 模拟圈子和推荐用户数据
const circles = ref([
  { id: 1, name: '文艺片的角落', desc: '53万成员 · 4.3万动态' },
  { id: 2, name: '跑者无疆', desc: '15万成员 · 7千动态' },
  { id: 3, name: '知行合一共进圈', desc: '3万成员 · 3千动态' },
]);
const recommends = ref([
  { id: 1, name: '米花', desc: '知乎答主 · 热门话题' },
  { id: 2, name: '灯灯', desc: '职场博主 · 干货分享' },
  { id: 3, name: '小白学AI', desc: 'AI 学习者 · 技术博文' },
]);

// 评论对话框状态
const dialogVisible = ref(false);
// 当前显示的评论列表
const currentComments = ref([]);
// 新评论输入内容
const newComment = ref('');
// 当前查看评论的问题索引
const currentFeedIndex = ref(-1);

// 打开评论对话框
const openCommentDialog = (index) => {
  currentFeedIndex.value = index;
  currentComments.value = feeds.value[index].commentList;
  dialogVisible.value = true;
};

// 关闭评论对话框
const closeCommentDialog = () => {
  dialogVisible.value = false;
  newComment.value = '';
  currentFeedIndex.value = -1;
};

// 处理对话框关闭前的确认
const handleClose = (done) => {
  ElMessageBox.confirm('确认关闭评论吗？未发表的评论将丢失。')
      .then(() => {
        done();
        closeCommentDialog();
      })
      .catch(() => {});
};

// 提交新评论
const submitComment = () => {
  if (newComment.value.trim()) {
    const comment = {
      author: '我',
      content: newComment.value.trim(),
      time: new Date().toLocaleString(),
      avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    };
    feeds.value[currentFeedIndex.value].commentList.push(comment);
    currentComments.value = feeds.value[currentFeedIndex.value].commentList;
    feeds.value[currentFeedIndex.value].comments += 1;
    newComment.value = '';
  }
};
</script>

<style scoped>
/* 设置全屏高度 */
.h-screen {
  height: 100vh;
}

/* 主容器居中 */
.knowledge-screen {
  width: 80%;
  margin: 0 auto;
}

/* 分隔区域样式 */
.knowledge-segment {
  margin-top: 20px;
  margin-bottom: 30px;
}

/* 搜索框容器样式 */
.retrieve {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* 问题卡片样式 */
.feed-card {
  width: 100%;
}

/* 回答文本样式，控制行数和展开 */
.answer-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 默认显示两行 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.6;
  word-break: break-word;
}

.answer-text.expanded {
  -webkit-line-clamp: unset; /* 展开时显示全部 */
  overflow: visible;
}

/* 阅读更多按钮样式 */
.read-more-btn :deep(.el-button) {
  color: #1e80ff;
  padding-left: 0;
}

.read-more-btn :deep(.el-button:hover) {
  color: #0066cc;
}

/* 自定义点赞按钮样式 */
.custom-like-button {
  color: #606266;
  background-color: #ffffff;
  border-color: #dcdfe6;
}

.custom-like-button.is-liked {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #b3d8ff;
}

.custom-like-button:hover {
  color: #606266;
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}

.custom-like-button.is-liked:hover {
  color: #409eff;
  background-color: #d9ecff;
  border-color: #a0cfff;
}

/* 评论对话框内容区样式 */
.comment-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

/* 使用表格单元格方法强制对齐头像和文字 */
.comment-row {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.avatar-cell {
  display: table-cell;
  vertical-align: top;
  padding-right: 8px; /* 头像与文字间距 */
}

.content-cell {
  display: table-cell;
  vertical-align: top;
}

/* 重置头像默认样式以确保对齐 */
.avatar-cell :deep(.el-avatar) {
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top;
}
</style>



